import getDynamicData from './DynamicData'
import { watchSwitchLang } from '@/utils/i18n'
import { watch, ref } from 'vue'

// 暴露出动态列数据
export const dynamicData = ref(getDynamicData())

// 监听 语言变化
watchSwitchLang(() => {
	// 重新获取国际化的值
	dynamicData.value = getDynamicData()
	// 重新处理被勾选的列数据
	initSelectDynamicLabel()
})

// 创建被勾选的动态列数据
export const selectDynamicLabel = ref([])
// 默认全部勾选
const initSelectDynamicLabel = () => {
	selectDynamicLabel.value = dynamicData.value.map((item) => item.label)
}
initSelectDynamicLabel()

// 声明 table 的列数据
export const tableColumns = ref([])
// 监听选中项的变化，根据选中项动态改变 table 列数据的值
watch(
	selectDynamicLabel,
	(val) => {
		tableColumns.value = []
		// 遍历选中项
		const selectData = dynamicData.value.filter((item) => {
			return val.includes(item.label)
		})
		tableColumns.value.push(...selectData)
	},
	{
		immediate: true
	}
)
